<template>
	<view class="content">
		<view class="l-body">
			<!-- l-madin -->
			<view class="l-main">
				<!--
				<view class="l-h3">
					<text class="l-h3-title">课外书籍</text>
				<!-- 	<view class="l-h3-more" @tap="$toast(`../search/search?type=1&value=1`)">查看全部<image class="l-icon-more"
							src="../../../static/l-icon-more.png" mode="widthFix"></image>
					</view> -->
				<!--</view>-->

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl1);towait()">
					<view>
						<image class="l-dt" :src="img1" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							GitHub入门与实践
						</view>
						<view class="l-dd-content">
							本书从Git的基本知识和操作方法入手，详细介绍了GitHub的各种功能，GitHub与其他工具或服务的集成，使用GitHub的开发流程以及如何将GitHub引入到企业中。在讲解GitHub的代表功能PullRequest时，本书专门搭建了供各位读者实践的仓库，邀请各位读者进行Pull
							Request并共同维护。本书旨在指导各位读者如何在开发现场使用GitHub进行高效开发,适合所有想要使用GitHub进行开发的程序员或团队阅读。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl2);towait()">
					<view>
						<image class="l-dt" :src="img2" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							Python语言程序设计
						</view>
						<view class="l-dd-content">
							本书保持了梁勇博士系列丛书中一贯的、标志性的教与学的哲学:以实例教，由实践学。书中采用了他所提出的已经经过实践检验的“基础先行”的方法，即在定义类之前，首先使用清晰简明的语言介绍基本程序设计概念，如选择语句、循环和函数;在介绍面向对象程序设计和GUI编程之前，首先介绍基本逻辑和程序设计概念。书中除了给出一些以游戏和数学为主的典型实例外，还在每章的开始使用简单的图形给出一两个例子，以激发学生的学习兴趣。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl3);towait()">
					<view>
						<image class="l-dt" :src="img3" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							DEEP LEARNING
						</view>
						<view class="l-dd-content">
							全书的内容包括3个部分：第1部分介绍基本的数学工具和机器学习的概念，它们是深度学习的预备知识；第2部分系统深入地讲解现今已成熟的深度学习方法和技术；第3部分讨论某些具有前瞻性的方向和想法，它们被公认为是深度学习未来的研究重点。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl4);towait()">
					<view>
						<image class="l-dt" :src="img4" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							数学建模算法与应用
						</view>
						<view class="l-dd-content">
							本书主要内容包括时间序列、支持向量机、偏最小二乘面归分析、现代优化算法、数字图像处理、综合评价与决策方法、预测方法以及数学建模经典算法等内容。本书既可以作为数学建模课程教材和辅导书，也可以作为本科生、研究生学习和准备全国大学生、研究生数学建模竞赛的参考书。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="pageto(contractUrl5)">
					<view>
						<image class="l-dt" :src="img5" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							算法导论
						</view>
						<view class="l-dd-content">
							本书深入讨论各类算法，并着力使这些算法的设计和分析能为各个层次的读者接受。各章自成体系，可以作为独立的学习单元。算法以英语和伪代码的形式描述，具备初步程序设计经验的人就能看懂。说明和解释力求浅显易懂，不失深度和数学严谨性。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl6);towait()">
					<view>
						<image class="l-dt" :src="img6" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							MATLAB程序设计与应用
						</view>
						<view class="l-dd-content">
							全书分为基础篇、应用篇和实验篇。基础篇包括MATLAB系统环境、MATLAB数据及其运算、MATLAB矩阵处理、MATLAB程序流程控制、MATLAB绘图、MATLAB数据分析与多项式计算、MATLAB数值微分与积分、MATLAB方程数值求解、MATLAB符号计算。应用篇包括MATLAB图形对象句柄、MATLAB图形用户界面设计、MATLAB
							Simulink系统仿真、MATLAB外部程序接口技术、MATLAB的应用。实验篇包括17个实验，每个实验都和课程学习内容紧密配合，以方便读者上机练习。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl7);towait()">
					<view>
						<image class="l-dt" :src="img7" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							神经网络与深度学习
						</view>
						<view class="l-dd-content">
							Neural networks are one of the most beautiful programming paradigms ever invented. In the
							conventional approach to programming, we tell the computer what to do, breaking big problems
							up into many small, precisely defined tasks that the computer can easily perform.By
							contrast, in a neural network we don’t tell the computer how to solve our problem.
							Instead,it learns from observational data, figuring out its own solution to the problem at
							hand.
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl8);towait()">
					<view>
						<image class="l-dt" :src="img8" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							统计学习方法
						</view>
						<view class="l-dd-content">
							统计学习是计算机且其应用领堪的-门重要的学科 本书圭面罩统地介绍了统计学习的主要方法 特别是监督学习方法，包括感知矶
							近部桂、朴素贝叶斯法、盹置树、逻辑斯谛回归与最大情模型、支持向量机、提升万法、 EM 算法、隐马如可夫模型和条件随机场等。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl9);towait()">
					<view>
						<image class="l-dt" :src="img9" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							Computer System
						</view>
						<view class="l-dd-content">
							We use the term concurrency to refer to the general concept of a system with multiple,
							simultaneous activities, and the term parallelism to refer to the use of concurrency to make
							a system run faster.
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl10);towait()">
					<view>
						<image class="l-dt" :src="img10" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							计算机程序设计艺术 第1卷 基本算法
						</view>
						<view class="l-dd-content">
							丛书第1卷以基本的程序设计概念和技术开始，然后专注于信息结构一计算机内部信息的表示、数据元素之间的结构关系及其有效处理方法。描述了模拟、数值方法、符号计算、软件与系统设计的初等应用。新版本增加了几十项简单但重要的算法和技术，并对有关数学预备知识做了大量修正以适应现时研究的趋向。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl11);towait()">
					<view>
						<image class="l-dt" :src="img11" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							计算机程序设计艺术 第2卷 半数值算法
						</view>
						<view class="l-dd-content">
							第2卷对半数值算法领域做了全面介绍，分“随机数”和“算术”两章。本卷总结了主要算法范例及这些算法的基本理论，广泛剖析了计算机程序设计与数值分析间的相互联系。第3版中特别值得注意的是Knuth对随机数生成程序的重新处理和对形式幂级数计算的讨论。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>

				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl12);towait()">
					<view>
						<image class="l-dt" :src="img12" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							计算机程序设计艺术 第3卷 排序与查找
						</view>
						<view class="l-dd-content">
							第3卷的头一次修订对经典计算机排序和查找技术做了最全面的考察。它扩充了第1卷对数据结构的处理，以将大小数据库和内外存储器一并考虑;遴选了精心核验的计算机方法，并对其效率做了定量分析。第3卷的突出特点是对“最优排序”一节的修订和对排列论与通用散列法的讨论。
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->

							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				<view style="text-align: center;font-size: 30rpx;color: #F1F1F1;margin-top: 15rpx;">
					已加载全部
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img1: `/static/课外书籍/github.jpg`,
				img2: `/static/课外书籍/python.jpg`,
				img3: `/static/课外书籍/深度学习.jpg`,
				img4: `/static/课外书籍/数学建模.jpg`,
				img5: `/static/课外书籍/算法导论.jpg`,
				img6: `/static/课外书籍/matlab.jpg`,
				img7: `/static/课外书籍/神经网络.jpg`,
				img8: `/static/课外书籍/统计学习方法.jpg`,
				img9: `/static/课外书籍/computer.jpg`,
				img10: `/static/课外书籍/计算机程序设计艺术1.jpg`,
				img11: `/static/课外书籍/计算机程序设计艺术2.jpg`,
				img12: `/static/课外书籍/计算机程序设计艺术3.jpg`,

				contractUrl1: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/8fe988d6-455d-49f2-b28c-630023c70664.pdf',
				contractUrl2: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/390e4a11-5f20-438f-b502-b98943b2d2be.pdf',
				contractUrl3: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/8b57b25e-99bc-4224-af6b-4c38ebdb413f.pdf',
				contractUrl4: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/57bf927c-d5cf-4aeb-b675-bb0da01e4f0e.pdf',
				contractUrl5: '/pages/bookself/pdfshangxia/suanfa/suanfa',
				contractUrl6: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/79f24ea9-b7a6-4f53-b69c-afa8b68a3a8b.pdf',
				contractUrl7: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/bc6eb1b1-2ea4-4e30-954d-7718a6028f9b.pdf',
				contractUrl8: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/cd5b29b5-ac2d-4859-8750-25625e6a959a.pdf',
				contractUrl9: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/fb4e69fa-f5ce-4c51-8949-3d8164ab8998.pdf',
				contractUrl10: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/481a1c1d-e782-4a33-bd56-9292a6a4f8b7.pdf',
				contractUrl11: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/e8a1fc38-e3e0-4aa5-9b1e-679d9e50f663.pdf',
				contractUrl12: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/f4b5f54a-eb6d-49ee-a7ed-0f9188286ef1.pdf',
			}
		},
		methods: {
			pageto(url) {
				uni.navigateTo({
					url: url
				})
			},
			towait() {
				uni.navigateTo({
					url: "/pages/bookself/filePreview/filePreview",
				});
			},
			successall(e) {
				console.log(e.tempFilePaths[0]);
				this.Url = e.tempFilePaths[0];
			},
			locapdf(filePath) {
				uni.openDocument({
					filePath: filePath,
					success: function(res) {
						console.log("打开文档成功");
					},
				});
			},
			androidOpenPdf(url) {
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log("打开文档成功");
							},
						});
					},
				});
			},
			openPDF(contractUrl) {
				switch (uni.getSystemInfoSync().platform) {
					case "android":
						console.log("安卓");
						// 这里直接调用原生的方法，我们上面定义的
						this.androidOpenPdf(contractUrl);
						break;
					case "ios":
						console.log("IOS");
						//这里跳转web-view页面
						uni.navigateTo({
							url: "/pages/bookself/filePreview/filePreview?contractUrl=" + contractUrl,
						});
						break;
					default:
						this.androidOpenPdf(contractUrl);
						break;
				}
			}
		}
	}
</script>

<style>
	page,
	uni-page {
		background-color: var(--c-bg-3);
		color: var(--c-txt-1);
		font-size: var(--f-size-2);

		/* font-size */
		--f-size-1: 24rpx;
		--f-size-2: 28rpx;
		--f-size-3: 32rpx;
		--f-size-4: 36rpx;
		--f-size-5: 40rpx;
		--f-size-6: 44rpx;

		/* color | background */
		--c-txt-1: #FFFFFF;
		--c-txt-2: #95A1A6;
		--c-txt-3: #cdced0;

		--c-bg-1: #000000;
		--c-bg-2: #7E7F94;
		--c-bg-3: #0b0c21;

		/*--c-bg-2:#7E7F94;
			
			/* padding-left | right */
		--pad-lr: 32rpx;

		/* navbar-height */
		--h-head: 96rpx;

		/* input placeholder text color */
		--c-input-holder: #696a7f;
	}

	/* l-head */
	page {
		background-color: #ffffff;
	}

	.l-head {
		margin-top: 15rpx;
	}

	.l-nav-bookrack {
		font-size: 30rpx;
	}


	/* l-main */

	.l-main {
		padding-bottom: 32rpx;
	}

	.l-h3 {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
		color: #000000;
	}

	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: #000000;
		font: var(--f-size-3) normal;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-view-footer {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}
	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}
</style>
